// 1.1 获取裁剪区域的 DOM 元素
let $image = $(".container img");

// 1.2 配置选项
let options = {
  // 纵横比
  aspectRatio: 1,
  preview: ".preview",
};
// 1.3 创建裁剪区域
$image.cropper(options);
$('#btnChooseImage').on('click', function () {
  $('#file').click()
})

$('#file').on('change', function () {
  const file = this.files[0]
  if (!file) {
    return
  }
  const filesrc = URL.createObjectURL(file)

  $image
    .cropper('destroy')
    .attr('src', filesrc)
    .cropper(options)
})

// ---------------  点击 确定 的时候，剪裁图片，转成base64格式，提交字符串到接口 ----------
$('#btnCreateAvatar').click(function () {
  // 剪裁得到一张图片（canvas图片）
  let base64Str = $image.cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
    width: 100,
    height: 100
  });

  // 把图片转成base64格式
  let dataURL = base64Str.toDataURL('image/png'); // 把canvas图片转成base64格式的字符串
  console.log(dataURL);

  axios.post('/my/update/avatar', `avatar=${encodeURIComponent(dataURL)}`).then(({ data: { message, status } }) => {
    if (status !== 0) {
      return layer.msg(message)
    }
    layer.msg(message)
    window.parent.getUserInfo()
  })
})